<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax_nojquery</title>
</head>
<body>
	Ajax_NO_JQuery
	<hr color="red">
	id:<input type="text" name="id" id="id"> 
	name:<input type="text" name="name" id="name">
	<br>Returned<br>
	<textarea rows="5" cols="30" name="data" id="data" readonly="readonly"></textarea>
</body>
<script type="text/javascript">
	var xmlHttpRequest;
	window.onload = function() {
		document.getElementById("id").onblur = function() {
			ajax();
		};
		document.getElementById("name").onblur = function() {
			ajax();
		};
	};
	//创建XMLHttpRequest
	function createXMLHttpRequest() {
		if (window.XMLHttpRequest) {
			xmlHttpRequest = new XMLHttpRequest();
		} else {
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}
	};
	//ajax,访问服务器并取得返回值,回调函数处理返回值,并进行局部页面刷新 
	function ajax() {
		createXMLHttpRequest();
		var id = document.getElementById("id").value;
		var name = document.getElementById("name").value;
		xmlHttpRequest.open("POST", "/test/Ajax01?id=" + id + "&name=" + name + "");
		xmlHttpRequest.onreadystatechange = ajaxCallback;
		xmlHttpRequest.send();
	};
	//回调函数
	function ajaxCallback() {
		if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
			var returnedData = xmlHttpRequest.responseText;
			document.getElementById("data").value = returnedData;
		}
	};
</script>
</html>